<template>
  <div class="welcome-bg">
    <div class="position-box" id="position-box">
      <p class="animate-word-in text-base+">
        <!-- 洞中方一日，世上已千年 -->
        <span v-if="random(0, 3) == 1">纸上得来终觉浅，绝知此事要躬行</span>
        <span v-else-if="random(0, 3) == 2">试玉要烧三日满，辨材须待七年期</span>
        <span v-else>吾尝终日而思矣，不如须臾之所学</span>
      </p>
      <div class="nav text-base">
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/home', 1)">首页</span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/music', 2)">
          音乐
        </span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/test', 3)">相册</span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/test', 4)">说说</span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/leave-message', 5)">
          留言板
        </span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/amap', 6)">访客</span>
        <span class="animate-slide-in-down text-color-hover" @click="goHome('/test', 7)">
          友情链接
        </span>
        <span class="animate-slide-in-down text-color-hover" @click="goLogin">登录</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { random } from 'lodash-es';

  const $router = useRouter();
  const goHome = (key: string, index: number) => {
    if (index > 2 && index != 5 && index != 6) {
      ElMessage.info('博主还在开发，敬请期待');
      return;
    }
    $router.push({ path: key, query: { index: index } });
  };
  const goLogin = () => {
    $router.push({ path: '/login' });
  };
</script>

<style lang="scss" scoped>
  .welcome-bg {
    // background: #09415a;
    margin: 0;
  }
  canvas {
    /* cursor: crosshair; */
    display: block;
  }
  .position-box {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 45%;
    color: #fff;
    z-index: 2;

    .animate-word-in {
      width: 0;
      white-space: nowrap;
      text-align: center;
      margin: auto;
      margin-bottom: 80px;
      overflow: hidden;
      border-right: 1px solid transparent;
      animation:
        animate-x 6s 0s steps(15, start) infinite,
        cursor-x 1s 0s linear infinite;
    }
    /* 改变容器宽度 实现逐个显示*/
    @keyframes animate-x {
      to {
        width: 15rem;
      }
    }
    @keyframes cursor-x {
      0% {
        border-right: 0.8px solid rgba(0, 0, 0, 0);
      }
      100% {
        border-right: 0.8px solid rgba(0, 0, 0, 0.4);
      }
    }

    div {
      display: flex;
      justify-content: center;
      span {
        border-bottom: 1px solid #fff;
        box-sizing: border-box;
        margin: 0 8px;
        cursor: pointer;
        position: relative;
        top: 10px;
        transform: translateY(-10px);
        transition:
          transform 3s ease,
          color 0.3s ease;
      }
    }
  }
</style>
